<template>
  <div class="card" v-loading="loading">
    <div class="card-body">
      <el-page-header class="mb-4" v-if="back" @back="$router.back()">
        <span slot="content" style="font-size: 1.15rem">
          {{ relatedData.customer_name || '-' }}贷后管理
        </span>
      </el-page-header>
      <div v-else class="py-2" style="font-size: 1.15rem">
        {{ relatedData.customer_name || '-' }}贷后管理
      </div>
      <div class="d-flex align-items-center">
        <div class="flex-1 align-items-center">
          <div class="after-dashboard cursor-pointer" @click="handleChangeStatus">
            <svg viewBox="0 0 100 100">
              <path
                d="M 50 50 m 0 47 a 47,47 0 1 1 0,-94 a 47,47 0 1 1 0,94"
                class="after-dashboard__process"
                stroke="#DEDEDE"
              ></path>
              <path
                d="M 50 50 m 0 47 a 47,47 0 1 1 0,-94 a 47,47 0 1 1 0,94"
                class="after-dashboard__process"
                :stroke="afterStatus.color"
              ></path>
              <path
                d="M 50 50 m 0 47 a 47,47 0 1 1 0,-94 a 47,47 0 1 1 0,94"
                class="after-dashboard__process after-dashboard__dash"
                stroke="#FFF"
              ></path>
              <path
                d="M 50 50 m 0 40 a 40,40 0 1 1 0,-80 a 40,40 0 1 1 0,80"
                class="after-dashboard__inner"
                :style="{ strokeDasharray: `${innerProcessLength}px, 251.327px` }"
                stroke="#FFAB19"
              ></path>
              <path
                d="M 50 50 m 0 40 a 40,40 0 1 1 0,-80 a 40,40 0 1 1 0,80"
                class="after-dashboard__inner"
                :style="{ strokeDasharray: `${innerProcessPercent}px, 251.327px` }"
                stroke="#47CBC9"
              ></path>
            </svg>
            <div class="after-dashboard__text">
              <span class="font-weight-bold" :style="{ color: afterStatus.color }">
                {{ afterStatus.label }}
              </span>
              <div class="after-dashboard__hint">
                <span>项目状态</span>
                <div><i class="fa fa-caret-down"></i></div>
              </div>
            </div>
          </div>
          <div class="after-history">
            <el-button type="text" @click="showHistory"><small>五级分类历史</small></el-button>
          </div>
        </div>
        <div class="flex-1">
          <p>{{ $utils.dateFormat(relatedData.load_end_date, 'yyyy年MM月dd日') }}</p>
          <span class="text-muted">到期时间</span>
        </div>
        <div class="flex-1">
          <p class="text-funds">{{ relatedData.reply_funds || '-' }}</p>
          <span class="text-muted">放款金额(万元)</span>
        </div>
        <div class="flex-1">
          <p class="text-funds">{{ relatedData.left_funds || '-' }}</p>
          <span class="text-muted">在保余额(万元)</span>
        </div>
      </div>
    </div>

    <!-- <after-register-dialog title="项目状态修改"
                           :visible.sync="editVisible"
                           :register-data="editRow"
                           :related-id="queryId"
                           :table-id="editId"
                           :current-status="behindStatus"
                           change-status
                           @success="handleEditSuccess"
                           @change-status="onChangeStatus"></after-register-dialog> -->

    <level-edit
      :visible.sync="editVisible"
      :form-data="editRow"
      :query-id="relatedId"
      @success="getData()"
    ></level-edit>

    <level-history :visible.sync="historyVisible" :query-id="relatedId"></level-history>
  </div>
</template>

<script>
import LevelEdit from '@/credit/views/city/self/after/level/LevelEdit'
import LevelHistory from '@/credit/views/city/self/after/level/LevelHistory'
import { mapGetters } from 'vuex'
export const enumAfterStatus = {
  1: { label: '正常', color: '#5CB85C' },
  2: { label: '关注', color: '#F2A615' },
  3: { label: '次级', color: '#DE6521' },
  4: { label: '可疑', color: '#E54526' },
  5: { label: '损失', color: '#B21F2A' },
}

export default {
  components: {
    LevelEdit,
    LevelHistory,
  },
  props: {
    back: {
      type: Boolean,
      default: true,
    },
    relatedId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      innerProcessLength: 188.496,
      loading: false,
      relatedData: {},
      params: {
        'customer_related_id.eq': '',
      },
      tableName: 'customer_related',
      behindStatus: '',
      afterStatus: enumAfterStatus[1],

      // 改变项目状态
      editId: '',
      editVisible: false,
      editRow: {},

      levelTable: 'five_level_class',
      levelData: {},

      historyVisible: false,
    }
  },
  computed: {
    ...mapGetters(['org']),
    isGov() {
      return this.org.orgClass === 'org_gov_ny'
    },
    innerProcessPercent() {
      const leftFunds = +this.relatedData.left_funds || 0
      const replyFunds = +this.relatedData.reply_funds || 0
      const payFunds = Math.max(replyFunds - leftFunds, 0)
      return (replyFunds ? payFunds / replyFunds : 1) * this.innerProcessLength
    },
    queryId() {
      return this.relatedId || this.$route.query.id
    },
  },
  watch: {
    // relatedData: {
    //   handler: function (val) {
    //     this.setStatus(val.load_beh_status)
    //   },
    //   immediate: true,
    //   deep: true,
    // },
    queryId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    showHistory() {
      this.historyVisible = true
    },
    async getData() {
      if (!this.queryId) return
      this.params['customer_related_id.eq'] = this.queryId

      this.loading = true
      Promise.all([
        this.$api.getData(this.$serviceName, this.tableName, this.params),
        this.$api.getData(
          this.$serviceName,
          this.levelTable,
          {
            index: 1,
            size: 1,
            'customer_related_id.eq': this.queryId,
          },
          { create_time: 'desc' }
        ),
      ])
        .then(([res, level]) => {
          this.levelData = level?.data?.data?.[0] ?? {}
          this.setStatus(this.levelData.class_type || 1)
          this.relatedData = res?.data?.[0] || {}
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleChangeStatus() {
      // 政府端不能改状态
      if (this.isGov) {
        return
      }
      this.editId = ''
      this.editRow = {
        class_type: this.levelData.class_type,
      }
      this.editVisible = true
    },
    handleEditSuccess() {
      this.$emit('success', {})
    },
    onChangeStatus(status) {
      this.setStatus(status)
    },
    setStatus(status) {
      this.behindStatus = `${status || ''}`
      this.afterStatus = enumAfterStatus[status] || enumAfterStatus[0]
    },
  },
}
</script>
<style lang="scss" scoped>
.after-dashboard {
  width: 100px;
  height: 100px;
  margin-left: 2rem;
  position: relative;
}
.after-history {
  width: 100px;
  height: 30px;
  margin-left: 2rem;
  position: relative;
}
.after-dashboard__process {
  stroke-dasharray: 221.482px, 295.31px;
  stroke-dashoffset: -36.9137px;
  stroke-linecap: round;
  stroke-width: 4;
  fill-opacity: 0;
}
.after-dashboard__dash {
  stroke-dasharray: 2px 32px;
  stroke-linecap: butt;
}
.after-dashboard__inner {
  stroke-dashoffset: -31.4159px;
  stroke-linecap: round;
  stroke-width: 1;
  fill-opacity: 0;
}
.after-dashboard__text {
  position: absolute;
  top: 58%;
  left: 50%;
  width: 100%;
  text-align: center;
  transform: translate(-50%, -50%);
  line-height: 1;
}
.after-dashboard__hint {
  margin-top: 0.5rem;
  font-size: 80%;
  color: $gray-600;
}
.text-funds {
  font-size: 1.5rem;
}
</style>
